<template>
    <el-container class="home-container">
        <el-header><!-- 头部区 -->
            <div class="headerBox">
                <!-- 头部区 -->
                <!--左  -->
                <div class="h_left">
                    <div class="l_icon"></div>
                    <div class="l_font">图形化流程设计工具</div>
                </div>
                <!--右  -->
                <div class="h_right">
                    <div class="msg"><span class="el-icon-bell"></span></div>
                    <div class="userIcon"></div>
                    <div class="userName">
                        <el-dropdown @command="handleCommand" trigger="click">
                            <span class="el-dropdown-link">
                                Admin<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="a">个人中心</el-dropdown-item>
                                <el-dropdown-item command="b">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">Aside</el-aside>
            <!-- 右侧内容主体 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
 
<script>
export default {
    methods: {
        logout() {
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    }
};
</script>
 
<style lang="less" scoped>
.home-container {
    height: 100%;
}

.el-header {
    background: #17244A;
    width: 100%;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
        //内嵌的div样式
        display: flex;
        align-items: center; //Logo和文字上下居中

        span {
            margin-left: 15px; //文字左侧设置间距，防止与Logo紧贴
        }
    }

    .h_left {
        width: 330px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .l_icon {
            width: 49px;
            height: 40px;
            background: url(../assets/headerIcon.png) no-repeat;
            background-size: 100% 100%;
        }

        .l_font {
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
        }

    }

    .h_right {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .msg {
            width: 44px;
            height: 44px;
            line-height: 50px;
            background: rgba(255, 255, 255, .1);
            border-radius: 10px;
            margin-right: 15px;
            text-align: center;

            span {
                color: #FFFFFF;
                font-size: 22px;
            }
        }

        .userIcon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: red;
            margin-right: 15px;
        }

        .userName {
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;

            .el-dropdown {
                color: #fff;
                font-weight: bold;
                font-size: 16px;
            }
        }
    }

}

.el-aside {
    background-color: #333744;
}

.el-main {
    background-color: #eaedf1;
}
</style>
